<template>
	<view>
		<view class="flex fixed bg-fff justify-center padding-sm">
			<view class="flex align-center justify-around" v-for="(item, index) in tabArr" :key="index" @click="handleTab(item)">
				<view class="">{{ item.name }}</view>
				<u-line v-if="index < tabArr.length - 1" direction="col" length="20" color="black" margin="30upx"></u-line>
			</view>
		</view>
		<u-popup :show="show" mode="left" @close="handleClose">
			<view class="pop-cont">
				<view v-for="(item, index) in cfylist">
					<view 
					class="padding-sm u-border-bottom"
					@click="handleList(item,0)"
					>
						{{ item.bname }}
						<view class="cu-tag round bg-yellow color-fff margin-left-xs">{{ item.num }}</view>
					</view>
					<view v-if="index == 0">
						<view @click="listShow = !listShow" class="padding-sm " :class="{ 'u-border-bottom': !listShow }">口味筛选</view>
						<u-cell-group v-show="listShow">
							<u-cell v-for="(itm, indx) in item.list" icon="setting-fill" :title="itm.tname" isLink @click="handleList(itm, 1)"></u-cell>
						</u-cell-group>
						<view @click="sceneShow = !sceneShow" class="padding-sm" :class="{ 'u-border-bottom': !sceneShow }">场景刷选</view>
						<u-cell-group v-show="sceneShow">
							<u-cell v-for="(itm, indx) in item.scene" icon="setting-fill" :title="itm.tname" isLink @click="handleList(itm, 2)"></u-cell>
						</u-cell-group>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"tab-custom",
		data() {
			return {
				glist: [],
				page: 0,
				tabArr: [
					{name: '分类',bcid: '',target: ''},
					{name: '蛋糕',bcid: '1',target: '/sub_pages/cake/cake'},
					{name: '面包',bcid: '11',target: '/sub_pages/bread/bread'},
					{name: '小食',bcid: '6',target: '/sub_pages/food/food'},
					{name: '购物车',	bcid: '',target: '/sub_pages/cart/cart'}
				],				
				show: false,
				cfylist: [],
				listShow: false,
				sceneShow: false
			};
		},
		created() {
			this.$get('/1.1/classes/classify').then(res => {
				console.log(res);
				this.cfylist = res.results.slice(0, 4);
			});
		},
		methods:{
			handleTab(item) {
				console.log(111);
				let { bcid, target } = item;
				console.log(target);
				if (bcid) {
					// 商品列表的数据更新
					// this.condition.bcid =Number(bcid);
					this.$store.commit('changeCondition', {
						bcid: Number(bcid)
					});
					uni.navigateTo({
						url:target
					})
				}
				if (!bcid && !target) {
					// 开启侧边分类
					this.show = true;
				}
				if(!bcid && target){
					uni.navigateTo({
						url:target
					})
				}
			},
			handleClose() {
				this.show = false;
			},
			handleList({ bid, tid }, type) {
				console.log(bid, tid);
				// 口味场/景筛选
				let obj = { bcid: bid };				
				if(type===1){obj.fid = tid}
				if(type===2){obj.sid = tid}				
				this.$store.commit('changeCondition', obj);
				this.show=false,
				uni.navigateTo({
					url:'/sub_pages/cake/cake'
				})
			}
		}
	}
</script>

<style lang="scss">
.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}
.pop-cont {
	width: 400upx;
	margin-top: 100upx;
}
</style>
